<template>
	<div>
		<button @click="changeTitle">修改标题</button>

		<button @click="currentPage = 'home'">Home</button>
		<button @click="currentPage = 'about'">About</button>
		<button @click="popularClick">首页-流行</button>
		<button @click="hotClick">首页-热门</button>
		<button @click="songClick">首页-歌单</button>

		<component :is="currentPage"></component>
	</div>
</template>

<script>
import { ref } from 'vue'
import useTitle from './hooks/useTitle'
import Home from './view/Home.vue'
import About from './view/About.vue'
export default {
	components: {
		Home,
		About,
	},
	setup() {
		const currentPage = ref('')

		const title = useTitle('app title')

		function popularClick() {
			title.value = '首页-流行'
		}

		function hotClick() {
			title.value = '首页-热门'
		}

		function songClick() {
			title.value = '首页-歌单'
		}

		return {
			currentPage,
			popularClick,
			hotClick,
			songClick,
		}
	},
}
</script>

<style scoped></style>
